<template>
    <van-tabs v-model="index" line-height="0" @click="handle_click">
        <van-tab v-for="(item, i) in menuList" :key="i">
            <template #title>
                <img :src="item.imgURL" alt="" />
                <h6 :class="{ active: index === i }">{{ item.title }}</h6>
            </template>
        </van-tab>
    </van-tabs>
</template>

<script>
export default {
    data() {
        return {
            index: 0,
            menuList: [
                {
                    title: "时令水果",
                    imgURL: "https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/时令水果.jpg"
                },
                {
                    title: "酒水冲调",
                    imgURL: "https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/酒水冲调.jpg"
                },
                {
                    title: "安心乳品",
                    imgURL: "https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/安心乳品.jpg"
                },
                {
                    title: "休闲零食",
                    imgURL: "https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/休闲零食.jpg"
                },
                {
                    title: "小吃",
                    imgURL: "https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/肉蛋食材.jpg"
                },
                {
                    title: "新鲜蔬菜",
                    imgURL: "https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/新鲜食材.jpg"
                },
                {
                    title: "熟食餐饮",
                    imgURL: "https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/熟食餐饮.jpg"
                },
                {
                    title: "海鲜水产",
                    imgURL: "https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/海鲜水产.jpg"
                },
                {
                    title: "粮油调味",
                    imgURL: "https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/粮油调味.jpg"
                },
                {
                    title: "烧烤",
                    imgURL: "https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/某手美食.jpg"
                },
                {
                    title: "纸杯清洁",
                    imgURL: "https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/纸品清洁.jpg"
                },
                {
                    title: "个人护理",
                    imgURL: "https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/个人护理.jpg"
                },
                {
                    title: "美妆护肤",
                    imgURL: "https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/美妆护肤.jpg"
                },
                {
                    title: "家居收纳",
                    imgURL: "https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/家居收纳.jpg"
                },
                {
                    title: "家用电器",
                    imgURL: "https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/家用电器.jpg"
                },
                {
                    title: "3C数码",
                    imgURL: "https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/3C数码.jpg"
                },
                {
                    title: "母婴用品",
                    imgURL: "https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/母婴用品.jpg"
                },
                {
                    title: "鲜花绿植",
                    imgURL: "https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/鲜花绿植.jpg"
                },
                {
                    title: "宠物用品",
                    imgURL: "https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/宠物用品.jpg"
                },
                {
                    title: "图书玩具",
                    imgURL: "https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/图书文具.jpg"
                },
                {
                    title: "手表配饰",
                    imgURL: "https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/手表配饰.jpg"
                }
            ]
        }
    },
    methods: {
        handle_click(name) {
            this.$emit("select", this.menuList[name].title)
        }
    }
}
</script>

<style lang="less">
.van-tabs {
    .van-tabs__wrap {
        height: 80px;
    }
    .van-tab {
        padding: 0 5px;
        img {
            object-fit: contain;
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
        h6 {
            margin-bottom: 5px;
            padding: 0 5px;
            border-radius: 10px;
            &.active {
                background-color: #d13193;
                color: #fff;
            }
        }
    }
}
</style>
